<template>
	<view class="info-pages">
		<SelectHouse :info="selectInfo"></SelectHouse>
		<view class="tips-item green">
			<view class="iconfont icon-a-jinggao1"></view>
			<view class="tips-name">无任何欠费、滞纳金</view>
		</view>
		<view class="tips-item" style="background-color: #fff;">
			<view class="tips-title">物业费到期时间</view>
			<view class="tips-text">{{fwPaymentEnd || '-年-月'}}到期</view>
		</view>
		<view class="info-block">
			<view class="title-item">
				<view class="title-info">
					<view class="line"></view>
					<view class="title">租赁信息</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-name">租赁证编号</view>
				<view class="form-info">
					<view class="form-content">{{leaseCertificateNumber}}</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-name">承租人</view>
				<view class="form-info">
					<view class="form-content">{{tenantName}}</view>
					<view class="form-text green" v-if="faceAuthenticationTime">已实名</view>
					<view class="form-text red" v-else>未实名</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-name">身份证号码</view>
				<view class="form-info">
					<view class="form-content">{{tenantIdCard}}</view>
				</view>
			</view>
		</view>
		<view class="title-item">
			<view class="title-info">
				<view class="line"></view>
				<view class="title">请选择缴费时段</view>
			</view>
			<view class="more-title" @click="navigate('/page_pack/property/property_calculator')">
				<view class="more">物业费缴费标准</view>
				<view class="iconfont icon-a-jinggao1"></view>
			</view>
		</view>
		<view class="select-block">
			<view class="select-item">
				<view class="select-name">2025年待缴费（元）</view>
				<view class="select-price">{{needPropertyFee}}</view>
				<!-- <view class="select-name">物业费312元，垃圾处理费24元/人，合计339元</view> -->
			</view>
		</view>
		<view class="more-select">
			<view class="name">更多时段</view>
			<view class="select-info">
				<view class="unit">￥</view>
				<picker :range="selectList" :value="selectIndex" range-key="timePeriod" @change="pickerChange"
					class="select_crl">
					{{selectList[selectIndex]?selectList[selectIndex].timePeriod:'请选择缴费时段'}}
				</picker>
				<view class="iconfont icon-a-gengduo2"></view>
			</view>
			<view class="more-text">最少缴纳一年</view>
		</view>
		<view class="btn normal" @click="submit">￥{{form.totalPrice}} 确认缴费</view>
	</view>
</template>

<script>
	import {
		SelectHouse
	} from '@/components/SelectHouse.vue'
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		validate
	} from '@/util/validate.js';
	export default {
		components: {
			SelectHouse
		},
		data() {
			return {
				selectTab: 1,
				selectList: [],
				info: {
					price: ''
				},
				form: {
					totalPrice: 0,
					month:0,
				},
				rule: {
					totalPrice: {
						name: '缴费时段',
						required: false
					},
				},
				selectInfo: {},
				tenantName: '',
				tenantIdCard: '',
				faceAuthenticationTime: null,
				leaseCertificateNumber: '',
				fwPaymentEnd: '',
				needPropertyFee: ''
			}
		},
		methods: {
			pickerChange(e) {
				this.form.totalPrice = 0;
				this.selectIndex = e.detail.value;
				this.form.totalPrice = this.selectList[this.selectIndex].amount
				this.form.month = this.selectList[this.selectIndex].rentMonth
			},
			submit() {
				if (validate(this.form, this.rule)) {
					this.navigate('/page_pack/property/identification?price=' + this.form.totalPrice +
						'&month=' + this.form.month)
				}
			},
			desensitizeName(name) {
				if (!name) return '';
				// 中文姓名：保留第一个字，其余用*代替
				if (/[\u4e00-\u9fa5]/.test(name)) {
					return name.length <= 2 ?
						name.charAt(0) + '*' :
						name.charAt(0) + '*'.repeat(name.length - 1);
				}
				// 英文姓名：保留首字母
				return name.charAt(0) + '*'.repeat(name.length - 1);
			},
			desensitizeIdCard(idCard) {
				if (!idCard || idCard.length < 10) return idCard || '';
				// 保留前6位和后4位，中间用*代替
				return idCard.substring(0, 6) + '*'.repeat(idCard.length - 10) + idCard.slice(-4);
			}
		},
		onLoad() {
			this.form.totalPrice = this.info.price
		},
		onShow() {
			this.selectInfo = getStorage('selectInfo')
			this.selectList = this.selectInfo.propertyFeePeriods
			this.tenantName = this.desensitizeName(this.selectInfo.tenantName);
			this.tenantIdCard = this.desensitizeIdCard(this.selectInfo.tenantIdCard);
			this.faceAuthenticationTime = this.selectInfo.faceAuthenticationTime
			this.leaseCertificateNumber = this.selectInfo.leaseCertificateNumber
			this.fwPaymentEnd = this.selectInfo.fwPaymentEnd
			this.needPropertyFee = this.selectInfo.needPropertyFee
		}
	}
</script>

<style lang="scss" scoped>
	.info-pages {
		padding: 30rpx;

		.green {
			background-color: $success-background;
			color: $success-color;
		}

		.red {
			background-color: #fff2f0;
			color: #ff4d4f;
		}

		.tips-item {
			padding: 30rpx;
			border-radius: 20rpx;
			margin: 30rpx 0;
			display: flex;
			align-items: center;

			.iconfont {
				margin-right: 20rpx;
			}

			.tips-name {
				font-size: 30rpx;
			}

			.tips-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.tips-text {
				color: #767676;
				font-size: 30rpx;
			}
		}

		.title-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.title-info {
				display: flex;
				align-items: center;

				.line {
					width: 16rpx;
					height: 36rpx;
					background-color: $theme-color;
					border-radius: 30rpx;
					margin-right: 14rpx;
				}

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.more-title {
				display: flex;
				align-items: center;
				color: #767676;

				.more {
					font-size: 28rpx;
				}
			}
		}

		.info-block {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.form-item:last-child {
				border-bottom: none;
			}

			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 90rpx;
				border-bottom: 1px solid #f7f7f7;

				.form-name {
					font-size: 30rpx;
					color: #767676;
				}

				.form-info {
					display: flex;
					align-items: center;

					.form-text {
						height: 50rpx;
						font-size: 28rpx;
						width: 110rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.select-block {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.select-item {
				width: 100%;
				background-color: $theme-color;
				color: #fff;
				padding: 40rpx 30rpx;
				border-radius: 30rpx;

				.select-name {
					font-size: 28rpx;
				}

				.select-price {
					font-size: 34rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}
			}
		}

		.more-select {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.name {
				margin-bottom: 30rpx;
			}

			.select-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f7f7f7;
				line-height: 80rpx;

				.unit {
					font-size: 40rpx;
				}

				.select_crl {
					width: calc(100% - 100rpx);
					font-size: 30rpx;
				}
			}

			.more-text {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #767676;
			}
		}

		.btn {
			border-radius: 20rpx;
			margin-top: 40rpx;
			height: 90rpx;
		}
	}
</style>